<template slot-scope="scope">
    <div id="CollapsePanel" >
        <el-button type="primary" @click="onSelMoreTool">更多形状</el-button>
        <el-button type="primary" @click="onCloseTool">关闭</el-button>
        <ToolContainerSelect ref="refToolContainerSelect" />
        <div id="toolboxzone" class="tool-drawner" style="height:100%">
            <el-collapse v-model="activeSubToolArr" @change="handleChange">
                <el-collapse-item v-if="profesionnalMode" title="绘图工具" name="drawtools">
                    <div class="Toolbox">
                        <el-space wrap>
                            <div v-for="i in DrawToolList" :key=i.id>
                                <el-tooltip class="item" effect="light" :content=i.name placement="top-start"
                                    :show-after=toolTipTime>
                                    <span>
                                        <el-card v-if="i.category == 'base'" :body-style="{ padding: '0px' }"
                                            @dragstart="onDragTool(event, i.id,i.uuid)" @click="onSelTool(i.id,i.uuid)">
                                            <img v-bind:src=i.iconURL style="width: 32px; height: 32px;">
                                        </el-card>
                                    </span>
                                </el-tooltip>
                            </div>
                        </el-space>
                    </div>
                </el-collapse-item>

                <el-collapse-item v-if="profesionnalMode" title="编辑工具" name="edittools">
                    <div class="Toolbox">
                        <el-space wrap>
                            <div v-for="i in EditToolList" :key=i.id>
                                <el-tooltip class="item" effect="light" :content=i.name placement="top-start"
                                    :show-after=toolTipTime>
                                    <span>
                                        <el-card v-if="i.category == 'base'" :body-style="{ padding: '0px' }"
                                            @dragstart="onDragTool(event, i.id,i.uuid)" @click="onSelEditTool(i.id,i.uuid)">
                                            <img v-bind:src=i.iconURL style="width: 32px; height: 32px;">
                                        </el-card>
                                    </span>
                                </el-tooltip>
                            </div>
                        </el-space>
                    </div>
                </el-collapse-item>

                <el-collapse-item v-if="profesionnalMode" title="标注工具" name="dimtools">
                    <div class="Toolbox">
                        <el-space wrap>
                            <div v-for="i in DimToolList" :key=i.id>
                                <el-tooltip class="item" effect="light" :content=i.name placement="top-start"
                                    :show-after=toolTipTime>
                                    <span>
                                        <el-card v-if="i.category == 'base'" :body-style="{ padding: '0px' }"
                                            @click="onSelDimTool(i.id)">
                                            <img v-bind:src=i.iconURL style="width: 32px; height: 32px;">
                                        </el-card>
                                    </span>
                                </el-tooltip>
                            </div>
                        </el-space>
                    </div>
                </el-collapse-item>

                <div v-for="sub in subDrawnerList" :key=sub.name>
                    <el-collapse-item :title=sub.title :name=sub.name>
                        <div class="Toolbox">
                            <el-space wrap>
                                <div v-for="i in toolMapdata[sub.name]" :key=i.id>
                                    <el-tooltip v-if="i.tips == ''" class="item" effect="light" :content=i.name
                                        placement="top-start" :show-after=toolTipTime>
                                        <span>
                                            <el-card :body-style="{ padding: '0px' }"
                                                @dragstart="onDragTool(event, i.id,i.uuid)" @click="onSelTool(i.id,i.uuid)"
                                                style="background-color: #ffffff;">
                                                <img v-bind:src=i.iconURL style="width: 32px; height: 32px;">
                                            </el-card>
                                            <span>{{ i.name }}</span>
                                        </span>
                                    </el-tooltip>

                                    <el-tooltip v-if="i.tips.length > 0" class="item" effect="light" :content=i.tips
                                        placement="top-start" :show-after=toolTipTime>
                                        <span>
                                            <el-card :body-style="{ padding: '0px' }"
                                                @dragstart="onDragTool(event, i.id,i.uuid)" @click="onSelTool(i.id,i.uuid)"
                                                style="background-color: #ffffff;">
                                                <img v-bind:src=i.iconURL style="width: 32px; height: 32px;">
                                            </el-card>
                                            <span>{{ i.name }}</span>
                                        </span>
                                    </el-tooltip>
                                </div>
                            </el-space>
                        </div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
    </div>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import { useStore } from 'vuex';
const store = useStore();


import ToolContainerSelect from './ToolContainerSelect.vue'
import { LGXEnums } from '../../script/canvas/common/sysenum';
import symbolDao from '../../script/manage/dao/symbolDao.js'


var DrawToolList_ = [{ id: 0x030a0001, name: '直线', iconURL: "/res/icon/straightline.png", category: "base" },
{ id: 0x030a0002, name: '多段线', iconURL: "/res/icon/polyline.png", category: "base" },
// { id: 0x02070001, name: '母线', iconURL: "/res/icon/polyline.png", category: "base" },
{ id: 0X030B0000, name: '矩形', iconURL: '/res/icon/rect1.png', category: "base" },
{ id: 0X030C0000, name: '圆形', iconURL: '/res/icon/circle1.png', category: "base" },
{ id: 0X03230000, name: '椭圆形', iconURL: '/res/icon/ellipse1.png', category: "base" },
// { id: 0X030D0000, name: '多边形', iconURL: '/res/icon/polygon.png', category: "base" },
{ id: 0X03200000, name: '圆弧', iconURL: '/res/icon/arc.png', category: "base" },
{ id: 0X03140000, name: '椭圆弧', iconURL: '/res/icon/ellipsearc.png', category: "base" },
// { id: 0X03100000, name: '二次贝塞尔曲线', iconURL: '/res/icon/quadraticcurve.png', category: "base" },
// { id: 0X03110000, name: '三次贝塞尔曲线', iconURL: '/res/icon/beziercurve.png', category: "base" },
{ id: 0X03120000, name: '辅助线', iconURL: '/res/icon/auxline.png', category: "base" },
{ id: 0X03130000, name: '样条曲线', iconURL: '/res/icon/spline.png', category: "base" },
{ id: 0X03240000, name: 'image', iconURL: '/res/icon/image.png', category: "base" }
];

var EditToolList_ = [{ id: "edit_fastDelete", name: '快捷删除', iconURL: "/res/icon/delete.png", category: "base" },
{ id: "edit_trim", name: '修剪', iconURL: "/res/icon/trim.png", category: "base" },
{ id: "edit_offsetCopy", name: '偏移', iconURL: '/res/icon/offset.png', category: "base" },
{ id: "edit_RoundChamfer", name: '倒圆角', iconURL: '/res/icon/RoundChamfer.png', category: "base" },
{ id: "edit_RectChamfer", name: '倒直角', iconURL: '/res/icon/RectChamfer.png', category: "base" },
{ id: "edit_rotate", name: '旋转', iconURL: '/res/icon/rotate.png', category: "base" },
{ id: "edit_translate", name: '平移', iconURL: '/res/icon/translate.png', category: "base" },
{ id: "edit_scale", name: '缩放', iconURL: '/res/icon/scale.png', category: "base" },
{ id: "edit_mirror", name: '镜像', iconURL: '/res/icon/mirror.png', category: "base" },
{ id: "edit_extend", name: '延长', iconURL: '/res/icon/extend.png', category: "base" },
{ id: "edit_rectArray", name: '矩形阵列', iconURL: '/res/icon/rectarr.png', category: "base" },
{ id: "edit_ringArray", name: '环形阵列', iconURL: '/res/icon/circlearr.png', category: "base" },
{ id: "edit_fill", name: '填充', iconURL: '/res/icon/fill.png', category: "base" },
{ id: "edit_circletangency", name: '双圆切线', iconURL: '/res/icon/circletangency.png', category: "base" }
];

var DimToolList_ = [
    { id: LGXEnums.SubDimensionMode.dimLine, name: '线性标注', iconURL: '/res/icon/dimLine.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimRadius, name: '半径标注', iconURL: '/res/icon/dimRadius.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimDiameter, name: '直径标注', iconURL: '/res/icon/dimDiameter.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimAngle, name: '角度标注', iconURL: '/res/icon/dimAngle.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimAlign, name: '对齐标注', iconURL: '/res/icon/dimAlign.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimArc, name: '圆弧标注', iconURL: '/res/icon/dimArc.png', category: "base" },
    { id: LGXEnums.SubDimensionMode.dimContinue, name: '连续标注', iconURL: '/res/icon/dimContinue.png', category: "base" }
];
var subDrawnerList_ = [
    { name: "base-unit", title: "基本形状" },
    { name: 'flow-basic', title: '基本流程图形状' },
    { name: 'internet-netAndEqp', title: '网络外设' }
];

const toolTipTime = ref(1000)
const profesionnalMode = ref(false)
const toolList_data = ref([])
const toolMapdata = ref({})
const DrawToolList = ref(DrawToolList_)
const EditToolList = ref(EditToolList_)
const DimToolList = ref(DimToolList_)
const subDrawnerList = ref(subDrawnerList_)
// const activeSubToolArr = ref(['drawtools', 'edittools', 'base-unit'])
const activeSubToolArr = ref([])
const refToolContainerSelect = ref(null)
const toolBoxHeight = ref("600")

var onSelTool = function (toolTypeID,symbolUUID) {
    console.log("onSelTool-----:"+toolTypeID);
        window.canvasManager.setDrawTool(toolTypeID, window.mainctl,symbolUUID);
}

var onSelEditTool = function (toolType) {
    console.log("onSelEditTool-----");
    window.canvasManager.sendCMD(toolType, window.mainctl);
}


var onDragTool = function (evt, toolTypeID,symbolUUID) {
    console.log("onDragTool-----");
    window.mainctl.setTool(toolTypeID,symbolUUID);
}

var onSelMoreTool = function () {
    let t = refToolContainerSelect.value;
    console.log(t);
    t.setPreCheckedNodeArr(subDrawnerList.value);
    t.drawerVisible = true;
}

var onCloseTool = function(){
    let showFunc = window.gstore.state.onShowToolBox;
    if (showFunc){
        showFunc(false);
    }
}

//加载系统模具和图案填充样式参数,异步加载，先要传入回调函数
const onNotifySymbolLoadFinish = function(symbolRet){
    store.commit("updateSymbolData",symbolRet);
    initToolBox();
    window.mainctl.initialSymbol2MemFromStore(store.state.symbolDefData);
}

var handleChange = function () {
    console.log(activeSubToolArr);

    let haveInMemList = store.state.haveLoadCategoryList;
    let actList = activeSubToolArr.value;
    let unLoadClassName = "";
    actList.forEach(t => {
        if (haveInMemList.indexOf(t) == -1){
            //未加载的才需要加载
            unLoadClassName = t;
            return ;
        }
    });
    if (unLoadClassName && unLoadClassName.length > 0){
        symbolDao.SymbolDAO.postRqstSymbolByCategory(unLoadClassName,onNotifySymbolLoadFinish);
    }
}

var initToolBox = function () {
    console.log("initToolBox******************");
    toolList_data.value = [];
    toolMapdata.value = [];
    toolBoxHeight.value = window.innerHeight - 400;
    var toolArr = [];
    var toolMapObj = {};
    let list = store.state.symbolDefData.symbolArr;
    for (var m = 0; m < list.length; m++) {
        var t = list[m];
        let uuid = t.uuid;
        if (!uuid){
            uuid = '';
        }
        var id = t.type;
        var name = t.name;
        var iconURL = t.iconURL;
        var category = t.category;
        let tips = "";
        if (t.tips) {
            tips = t.tips;
        }
        var yuansu = { id, name, iconURL, category, tips,uuid };
        toolArr.push(yuansu);

        let subArr = toolMapObj[t.category];
        if (!subArr) {
            subArr = [];
            toolMapObj[t.category] = subArr;
        }

        subArr.push(yuansu);
    }
    toolList_data.value = toolArr;
    toolMapdata.value = toolMapObj;
}

onMounted(() => {
    console.log("collapsePanel onMounted");
    initToolBox();
})

var notifySelNode = function (selNodeArr) {
    console.log("CollapsePanel notifySelNode*****");
    let t1 = selNodeArr[0];
    console.log(t1);
    let t2 = selNodeArr[1];
    console.log(t2);
    console.log(selNodeArr);

    subDrawnerList.value = [];
    for (let i = 0; i < selNodeArr.length; i++) {
        let node = selNodeArr[i];
        if (node.isleaf) {
            let name = node.className;
            let title = node.title;
            let item = { name, title };
            subDrawnerList.value.push(item);
        }
    }
}


defineExpose({
    notifySelNode,
    initToolBox,
    profesionnalMode
});

</script>


<style scoped>
/* 头部样式 */
.tool-drawner {
    position: relative;
    background-color: #dcdbdb;
    /* overflow-y: auto; */
}

.custom-icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

.autoscroll_item {
    overflow-y: auto;
}
</style>
../../script/manage/dao/symbolDao.js